<template>
	<view class="container">
		<view class="nav-bar">
			<view 
				class="nav-item" :class="{currentStyle:tabCurrentIndex==index}"
				v-for="(item,index) in navList" :key="index"
				@click="tabClick(index)"
			>
				{{item}}
			</view>
		</view>
		
		<!-- 这用了uview-ui-1.0的模板 -->
		<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
			<swiper-item class="tab-content u-menu-wrap" >     
				<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop">
					<!-- 说要在前端把零食改成蔬菜 -->
					<view v-for="(item,index) in this.allGoods" :key="index" class="u-tab-item" :class="[current==index ? 'u-tab-item-active' : '']"
					 :data-current="index" @tap.stop="swichMenu(index)">
						<view class="u-line-1">
							{{item.leixing}}
							<u-badge :is-center="isCenter" :type="type" :count="count(index)" :is-dot="isDot" :offset="offset" :size="size"></u-badge>
						</view>
					</view>
					
					
				</scroll-view>
				<scroll-view scroll-y scroll-with-animation class="right-box" >
					<view class="list" v-if="show_menu?true:false">
						<!-- 要在前端把零食改成蔬菜，所以这个从后端读的类型先去掉吧 -->
						<!-- <view class="list-leixing">{{show_menu.leixing}}</view> -->
						<view class="list-item"  v-for="(item,index) in show_menu.goods" :key="index">
							<image @tap="toDetail(item)" :src="item.sptpcflj"></image>
							<view class="list-item-info">
								<view class="list-item-name">{{item.spmc}}</view>
								<text class="list-item-comment">{{item.spxq}}</text>
								<view class="list-item-sale"><!-- <text>月售5</text> --><text>评分:{{item.sppf}}</text></view>
								<view class="list-item-bottom">
									<view class="list-item-price">￥{{item.spdj}}</view>
									<view class="list-item-number">
										<view class="one" @click.stop="subtract(item)" v-if="show_num(item)!=0">-</view>
										<view class="two" v-if="show_num(item)!=0">{{show_num(item)}}</view>
										<view class="three" @click.stop="add(item)">+</view>
									</view>
								</view>
							</view>
						</view>
						<view class="zhanwei"></view>
					</view>
				</scroll-view>
			</swiper-item>
			
			<swiper-item class="shangjia">
				<shangjiaInfo></shangjiaInfo>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import {mapState,mapGetters} from 'vuex'
	import shangjiaInfo from '@/components/shangjiaInfo.vue'
	export default{
		components:{
			shangjiaInfo
		},
		data(){
			return{
				//徽标
				// count: 8,
				type: 'error',
				isDot: false,
				offset: [0, 0],
				size: 'default',
				isCenter: false,
				
				// navList:['点菜','评价','商家'],
				navList:['点菜','商家'],
				tabCurrentIndex:0,//顶部导航栏
				
				scrollTop: 0, //tab标题的滚动条位置
				current: 0, // 预设当前项的值 左侧滚动条
				menuHeight: 0, // 左边菜单的高度
				menuItemHeight: 0, // 左边菜单item的高度
				
			
			}
			
		},
		computed: {
		  ...mapState(['userInformation','goodsInfor','num_flag','cart', 'allGoods']),
		  ...mapGetters(['count','show_num','totalPrice','show_menu'])
		},
		methods:{
			//顶部导航栏点击
			tabClick(index){
				this.tabCurrentIndex = index
				// console.log('tabCurrentIndex',this.tabCurrentIndex)
			},
			
			//swiper 切换
			changeTab(e){
				this.tabCurrentIndex = e.target.current;
				// console.log('是你吗')
			},
			
			//去商品详情页
			toDetail(item){
				uni.navigateTo({
					url:'/pages/toDetail/toDetail?spmc='+item.spmc+'&spdj='+item.spdj+'&spxq='+item.spxq+'&sppf='+item.sppf+'&sptpcflj='+item.sptpcflj
				})
			},
			
			//点加号，往购车里加东西
			add(shop_info){
				this.$store.commit("add_cart",shop_info);
			},
			
			
			//点减号，往购物车里减东西
			subtract(shop_info){
				this.$store.commit("subtract_cart",shop_info);
			},
			
			// 点击左边的栏目切换
			async swichMenu(index) {
				if(index == this.current) return ;
				this.current = index;
				this.$store.state.num_flag=index;
				
				// 如果为0，意味着尚未初始化
				if(this.menuHeight == 0 || this.menuItemHeight == 0) {
					await this.getElRect('menu-scroll-view', 'menuHeight');
					await this.getElRect('u-tab-item', 'menuItemHeight');
				}
				// 将菜单菜单活动item垂直居中
				this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
			},
			
			// 获取一个目标元素的高度
			getElRect(elClass, dataVal) {
				new Promise((resolve, reject) => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.' + elClass).fields({size: true},res => {
						// 如果节点尚未生成，res值为null，循环调用执行
						if(!res) {
							setTimeout(() => {
								this.getElRect(elClass);
							}, 10);
							return ;
						}
						this[dataVal] = res.height;
					}).exec();
				})
			},
			
			change(e) {
				console.log(e.value);
			},
		}
	}
</script>

<style lang="scss">
	.nav-bar{
		// border: 1rpx solid #f00;
		padding:0 15rpx;
		display: flex;
		flex-direction: row;
		.nav-item{
			// border: 1rpx solid #000;
			padding: 10rpx 30rpx;
			position: relative;
			&.currentStyle{
				font-weight: bold;
				&:after{
					content: '';
					position: absolute;
					width: 40rpx;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					border-bottom: 2px solid #02A774
				}
			}
		}
	}
	
	.swiper-box{
		// height: calc(100% - 40px); 
		height: 700rpx;
		// border: 1rpx solid #f00;
		border: 1rpx solid #F1F1F1;
		margin-top: 30rpx;
	}
	
	.u-tab-view {
		width: 150rpx;
		height: 100%;
		// border: 1rpx solid #f00;
		background: #f6f6f6;
	}
	
	.u-tab-item {
		height: 110rpx;
		// background: #f6f6f6;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		color: #444;
		font-weight: 400;
		line-height: 1;
		position: relative;
		/* .u-line-1{
			position: relative;
		} */
	}
	
	.u-tab-item-active {
		position: relative;
		color: #000;
		font-size: 30rpx;
		font-weight: 500;
		background: #fff;
	}
	
	.u-tab-item-active::before {
		content: "";
		position: absolute;
		border-left: 4px solid #007AFF;
		height: 32rpx;
		left: 0;
		top: 39rpx;  //  (110-32)/2
	}
	
	.u-menu-wrap {
		display: flex;
		// overflow: hidden;
		// border: 1rpx solid #f00;
	}
	
	.right-box {
		// background-color: rgb(250, 250, 250);
		// border: 1rpx solid #007AFF;
		height: 98%;
		padding: 16rpx;
	}
	.zhanwei{
		width: 100%;
		height: 130rpx;
		// border: 1rpx solid #f00;
	}
	.list-item{
		// border: 1rpx solid #000000;
		display: flex;
		flex-direction: row;
		overflow: hidden;
		height: 220rpx;
		align-items: center;
		image{
			width: 170rpx;
			height: 170rpx;
		}
		.list-item-info{
			flex: 1;
			width: 0;
			// overflow: hidden; 这句没用了
			display: flex;
			flex-direction: column;
			// justify-content: flex-end;
			// align-items: flex-end;
			padding: 10rpx 10rpx;
			// border: 1rpx solid #f00;
			height: 200rpx;
			.list-item-name{
				font-weight: bold;
				font-size: 30rpx;
				padding-bottom: 8rpx;
				
				// border: 1rpx solid #f00;
			}
			.list-item-comment{
				font-size: 20rpx;
				color: $font-color-base;
				// padding-bottom: 8rpx;
				 // border: 1rpx solid #f00;
				 // height: 24rpx;
				 // line-height: 1;
				 /* 重要！*/
				 white-space: nowrap;
				 overflow: hidden;
				 text-overflow: ellipsis; //超出部分用省略号
			}
			.list-item-sale{
				font-size: 20rpx;
				color: $font-color-base;
				// padding-bottom: 8rpx;
				// border: 1rpx solid #f00;
				display: flex;
				text{
					// border: 1rpx solid #f00;
					padding-right: 15rpx;
				}
			}
			.list-item-bottom{
				flex: 1;
				// border: 1rpx solid #f00;
				align-items: flex-end;
				line-height: 50rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				.list-item-price{
					color: #f00;
					font-size: 32rpx;
				}
				.list-item-number{
					display: flex;
					// border: 1rpx solid #f00;
					flex: 1;
					justify-content: flex-end;
					// :nth-child(1){
					.one{
						border: 1rpx solid #007AFF;
						border-radius: 50%;
						color: #007AFF;
						width: 40rpx;
						height: 40rpx;
						// height: 50rpx;
						// line-height: 40rpx;
						// font-size: 40rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}
					.two{
						// border: 1rpx solid #007AFF;
						width: 40rpx;
						height: 40rpx;
						// line-height: 40rpx;
						// font-size: 40rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}
					.three{
						border: 1rpx solid #007AFF;
						border-radius: 50%;
						background-color: #007AFF;
						color: #fff;
						width: 40rpx;
						height: 40rpx;
						// line-height: 40rpx;
						// font-size: 40rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
			}
		}
		
	}
	
	.shangjia{
		background-color: #f6f6f6;
	}
	.page-view {
		padding: 16rpx;
	}
</style>
